<template>
  <div class="user_list-page flexC">
    <div class="user_list-page flexC" style="margin-bottom: 20px;">
      <div class="pageHead flexC">
        <p>用户查询</p>
      </div>
      <div class="pageHead flexC">
        <Form ref="userForm" :model="userForm" inline :label-width="80">
          <FormItem label="用户名" prop="username">
            <Input
                type="text"
                v-model="userForm.username"
                placeholder="请输入用户名"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem label="真实姓名" prop="name">
            <Input
                type="text"
                v-model="userForm.name"
                placeholder="请输入真实姓名"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem label="手机号码" prop="phone">
            <Input
                type="text"
                v-model="userForm.phone"
                placeholder="请输入手机号"
                clearable
                style="width: 200px"
            />
          </FormItem>

          <FormItem style="margin-left: -35px" class="br">
            <!--            <Button @click="handleSearch" type="primary" icon="ios-search" style="margin-right: 10px;">搜索</Button>-->
            <Button @click="handleSearch" type="primary" icon="ios-search" style="margin-right: 10px;">搜索</Button>
            <!--            <Button @click="handleReset">重置</Button>-->
            <Button @click="handleReset('userForm')">重置</Button>
          </FormItem>
        </Form>
      </div>
    </div>



    <div class="pageHead flexC" style="padding-left: 0px;">

      <div class="pageHead flexC">
        <div style="display: flex;justify-content: space-between">
          <p>结果列表</p>
          <div>
            <Icon type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
            <i style="margin-right: 15px;">正常</i>
            <Icon type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
            <i style="margin-right: 15px;">冻结</i>
            <template>
              <Button type="primary" size="small" @click="usermodal=true">添加</Button>
              <Modal
                  v-model="usermodal"
                  title="添加用户"
                  fullscreen
                  >
                  <div style="width: 550px; display:inline-block">
                    <Form ref="crusermodel" :model="crusermodel" :rules="ruleValidate">

                        <div style="margin-left: 60px;margin-top: 20px;">
                          <FormItem label="用户名" prop="username">
                            <Input
                                type="text"
                                v-model="crusermodel.username"
                                clearable
                                style="width: 346px;margin-left: 15px;"
                            />
                          </FormItem>
                        </div>

                        <div style="margin-left: 60px;margin-top: 20px;">
                            <FormItem label="真实姓名" prop="name">
                              <Input
                                  type="text"
                                  v-model="crusermodel.name"
                                  clearable
                                  style="width: 346px"
                              />
                            </FormItem>
                        </div>

                        <div style="margin-left: 60px;margin-top: 20px;">
                          <FormItem label="密 码" prop="password">
                            <Input
                                type="password"
                                password
                                v-model="crusermodel.password"
                                style="width: 346px;margin-left: 25px;"
                            />
                          </FormItem>
                        </div>

                      <div style="margin-top: 15px;margin-left: 60px">
                        <FormItem label="性 别" prop="sex">
                            <RadioGroup v-model="crusermodel.sex" button-style="default" size="small" style="margin-left: 25px;">
                              <Radio :label=1 type="true">男</Radio>
                              <Radio :label=0 type="false" style="margin-left: 20px;">女</Radio>
                            </RadioGroup>
                          </FormItem>
                      </div>

                      <div style="margin-left: 60px;">
                          <FormItem label="联系电话" prop="phone">
                            <Input
                                type="text"
                                v-model="crusermodel.phone"
                                maxlength="11"
                                clearable
                                style="width: 346px"
                            />
                          </FormItem>
                        </div>

                        <div style="margin-left: 60px;">
                          <FormItem label="电子邮箱" prop="email">
                            <Input
                                type="text"
                                v-model="crusermodel.email"
                                clearable
                                style="width: 346px"
                            />
                          </FormItem>
                        </div>

                        <div style="margin-top: 15px;margin-left: 33px">
                          <FormItem label="是否超级管理员" prop="is_superuser">
                              <RadioGroup v-model="crusermodel.is_superuser" button-style="default" size="small" style="margin-left: 25px;">
                                <Radio :label=1 type="true">是</Radio>
                                <Radio :label=0 type="false" style="margin-left: 20px;">否</Radio>
                              </RadioGroup>
                            </FormItem>
                        </div>

                        <div style="margin-left: 95px;">
                          <FormItem label="备注" prop="desc">
                            <Input
                                type="textarea"
                                v-model="crusermodel.desc"
                                clearable
                                style="width: 350px"
                                :rows="5"
                            />
                          </FormItem>
                      </div>
                    </Form>
                  </div>

                  <tree-table
                        :data="perdata"
                        ref="table"
                        :columns="percolumns"
                        :selectable="true"
                        :expand-type="false"
                        border
                        style="width: 1300px;float: right"
                      >
                      <template slot-scope="{ row }" slot="is_delete">
                        <Icon v-if="row.is_delete == false" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                        <Icon v-if="row.is_delete == true" type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
                      </template>
                  </tree-table>
                  <div slot="footer">
                    <Button @click="usermodal=false">取消</Button>
                    <Button type="primary" @click="crusers('crusermodel')">确定</Button>
                  </div>
              </Modal>
            </template>
          </div>
        </div>
      </div>

      <div class="pageContent flexC">
        <Table
            border
            :columns="columns"
            :data="data"
            sortable="custom"
            ref="table1"
            size="small"
        >
          <template slot-scope="{ row }" slot="is_active">
            <Icon v-if="row.is_active == true" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
            <Icon v-if="row.is_active == false" type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
          </template>
          <template slot-scope="{ row }" slot="action">
            <Button type="text" size="small" style="color: #2d8cf0" @click="updatauser(row)">编辑</Button>
            <Button type="text" size="small" style="color: #2d8cf0">重置密码</Button>
            <Button v-if="row.is_active===true" @click="userstate(row.id, 'false')" type="text" size="small" style="color: #e0980a">冻结</Button>
            <Button v-if="row.is_active===false" @click="userstate(row.id, 'true')" type="text" size="small" style="color: #e0980a">激活</Button>
            <Button @click="deuser(row.id)" type="text" size="small" style="color: #f5222d">删除</Button>
          </template>
        </Table>

        <Modal
            v-model="upusermodal"
            title="编辑用户"
            fullscreen
            >
            <div style="width: 550px; display:inline-block">
              <Form ref="upusermodel" :model="upusermodel" :rules="ruleValidate">

                  <div style="margin-left: 60px;margin-top: 20px;">
                    <FormItem label="用户名" prop="username">
                      <Input
                          type="text"
                          v-model="upusermodel.username"
                          clearable
                          style="width: 346px;margin-left: 15px;"
                      />
                    </FormItem>
                  </div>

                  <div style="margin-left: 60px;margin-top: 20px;">
                      <FormItem label="真实姓名" prop="name">
                        <Input
                            type="text"
                            v-model="upusermodel.name"
                            clearable
                            style="width: 346px"
                        />
                      </FormItem>
                  </div>

                <div style="margin-top: 15px;margin-left: 60px">
                  <FormItem label="性 别" prop="sex">
                      <RadioGroup v-model="upusermodel.sex" button-style="default" size="small" style="margin-left: 25px;">
                        <Radio :label=1 type="true">男</Radio>
                        <Radio :label=0 type="false" style="margin-left: 20px;">女</Radio>
                      </RadioGroup>
                    </FormItem>
                </div>

                <div style="margin-left: 60px;">
                    <FormItem label="联系电话" prop="phone">
                      <Input
                          type="text"
                          v-model="upusermodel.phone"
                          maxlength="11"
                          clearable
                          style="width: 346px"
                      />
                    </FormItem>
                  </div>

                  <div style="margin-left: 60px;">
                    <FormItem label="电子邮箱" prop="email">
                      <Input
                          type="text"
                          v-model="upusermodel.email"
                          clearable
                          style="width: 346px"
                      />
                    </FormItem>
                  </div>

                  <div style="margin-top: 15px;margin-left: 33px">
                    <FormItem label="是否超级管理员" prop="is_superuser">
                        <RadioGroup v-model="upusermodel.is_superuser" button-style="default" size="small" style="margin-left: 25px;">
                          <Radio :label=1 type="true">是</Radio>
                          <Radio :label=0 type="false" style="margin-left: 20px;">否</Radio>
                        </RadioGroup>
                      </FormItem>
                  </div>

                  <div style="margin-left: 95px;">
                    <FormItem label="备注" prop="desc">
                      <Input
                          type="textarea"
                          v-model="upusermodel.desc"
                          clearable
                          style="width: 350px"
                          :rows="5"
                      />
                    </FormItem>
                </div>
              </Form>
            </div>

            <tree-table
                  :data="perdata"
                  ref="uptable"
                  :columns="percolumns"
                  :selectable="true"
                  :expand-type="false"
                  border
                  style="width: 1300px;float: right"
                >
                <template slot-scope="{ row }" slot="is_delete">
                  <Icon v-if="row.is_delete == false" type="ios-leaf" size="24" color="rgb(25, 190, 107)"/>
                  <Icon v-if="row.is_delete == true" type="ios-leaf" size="24" color="rgb(255, 153, 0)"/>
                </template>
            </tree-table>
            <div slot="footer">
                <Button @click="upusermodal=false">取消</Button>
                <Button type="primary" @click="upusers('upusermodel')">修改</Button>
            </div>
        </Modal>
      </div>
    </div>
  </div>
</template>

<script>
import {permissionslist, userlist, userupdata, cruser, updatauser, deleteuser} from '../../api/api'
import Vue from 'vue'
import TreeTable from 'tree-table-vue'
Vue.use(TreeTable)


export default {
  name: "user",
  created() {
    this.getuserlist();
    this.perlist()
  },
  methods: {
    handleSearch() {
      userlist(this.userForm).then(res =>{
        let data = res.data.data
        this.data = data
      })
    },

    handleReset(name) {
      this.getuserlist()
      this.$refs[name].resetFields();
    },

    deuser(id) {
      deleteuser(id).then(res => {
        this.getuserlist()
        this.$Message.success('删除成功！')
      })
    },

    userstate(id,pw) {
      debugger
      if (pw==='true') {
        updatauser(id,{is_active:true}).then(res=>{
          this.$Message.success('激活成功！')
          this.getuserlist()
        })
      }else {
        updatauser(id,{is_active:false}).then(res=>{
          this.$Message.success('冻结成功！')
          this.getuserlist()
        })
      }
    },

    updatauser(row) {
      this.upuserID = row.id
      this.upusermodal = true
      this.upusermodel.is_superuser= row.is_superuser === true ? 1 : 0
      this.upusermodel.username= row.username
      this.upusermodel.name= row.name
      this.upusermodel.sex= row.sex === 'man' ? 1 : 0
      this.upusermodel.phone= row.phone
      this.upusermodel.email= row.email
      this.upusermodel.desc= row.desc
      let data = []
      for (let y=0; y<this.$refs.uptable.bodyData.length; y++){
        data.push(this.$refs.uptable.bodyData[y])
      }

      data.filter((item) => {
        if (row.permission.includes(item.id)) {
          item._isChecked = true
        }
        // JSON.stringify(row.permission).includes(item.id)
        // if(JSON.stringify(row.permission).includes(item.id)===true) {
        //   item._isChecked = true
        // }
      })

      // debugger
      // for (let i=0; i<this.$refs.uptable.bodyData.length; i++){
      //   for (let y=0; y<row.permission.length; y++){
      //     if (row.permission[y] === this.$refs.uptable.bodyData[y].id){
      //       this.$refs.uptable.bodyData[y]._isChecked=true
      //     }
      //   }
      // }

      // this.$refs.uptable.bodyData[0]._isChecked=true
    },

    perlist() {
      permissionslist(this.searchForm).then(res =>{
        let data = res.data
        data = data.map((item) => {
            return {
              id: item.id,
              name: item.name,
              parent: item.parent,
              desc: item.desc,
              is_delete: item.is_delete,
              sort: item.sort,
              method: item.method,
              types: item.types,
              create_time: item.create_time,
              expand: true,
              selected: true,
            }
          })
        let arrayToTree = require("array-to-tree");
          this.perdata = arrayToTree(data, {
            parentProperty: "parent",
            childrenProperty: "children",
            customID: "id",
          });
      })
    },

    getuserlist() {
      userlist().then(res => {
        let data = res.data.data
        this.data = data
      })
    },

    crusers(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
              "username": this.crusermodel.username,
              "name": this.crusermodel.name,
              "password": this.crusermodel.password,
              "sex": this.crusermodel.sex === 1 ? "man" : "girl",
              "phone": this.crusermodel.phone,
              "email": this.crusermodel.email,
              "docs": this.crusermodel.docs,
              "permission": this.$refs.table.getCheckedProp('id')
            }
            cruser(data).then(res => {
              this.usermodal = false
              this.getuserlist()
              this.$Message.success(res.msg)
            })
        }
      })
    },

    upusers(name,row) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
              "username": this.upusermodel.username,
              "name": this.upusermodel.name,
              "sex": this.upusermodel.sex === 1 ? "man" : "girl",
              "phone": this.upusermodel.phone,
              "email": this.upusermodel.email,
              "desc": this.upusermodel.desc,
              "is_superuser": this.upusermodel.is_superuser,
              "permission": this.$refs.uptable.getCheckedProp('id')

            }
            debugger
            updatauser(this.upuserID,data).then(res => {
              this.upusermodal = false
              this.$Message.success(res.msg)
              this.getuserlist()
            })
        }
      })
    }
  },
  data() {
    return {
      upuserID:'',
      ruleValidate: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur,change'},
          {pattern: /^[a-z0-9A-Z\W]{6,9}.*$/,message: '用户名需为6位以上字母数字！',}
        ],
        name: [
          {required: true, message: '请输入真实姓名', trigger: 'blur,change'},
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur,change', type: 'number'},
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur,change'},
        ],
        email: [
          {required: true, message: '请输入电子邮箱', trigger: 'blur,change'},
          {pattern: /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,message: '邮箱格式错误！', }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur,change'},
        ],
      },
      crusermodel: {
        is_superuser: 1,
        username: '',
        name: '',
        password:'',
        sex: '',
        phone: '',
        email: '',
        docs:'',
      },
      upusermodel: {
        is_superuser: 1,
        username: '',
        name: '',
        password:'',
        sex: '',
        phone: '',
        email: '',
        desc:'',
      },
      usermodal:false,
      upusermodal:false,
      userForm: {
        username: '',
        name: '',
        phone: ''
      },
      data: [],
      perdata: [],
      percolumns: [
          {
          title: "名称",
          key: "name",
          align: "left",
          headerAlign: "center",
          width: 208,
        },
          {
          title: "目录名称/功能权限CODE",
          key: "method",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 200,
        },
          {
          title: "权限类型",
          key: "types",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 200,
        },
          {
          title: "备注",
          key: "desc",
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 309,
        },
          {
          title: "状态",
          key: "is_delete",
          type: "template",
          template: 'is_delete',
          align: "center",
          headerAlign: "center",
          // minWidth: 125,
          width: 150,
        },
      ],


      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "用户名",
          key: "username",
          align: "center",
          // minWidth: 125,
          width: 150,
        },
        {
          title: "真实姓名",
          align: "center",
          key: "name",
          width: 150,
        },
        {
          title: "性别",
          key: "sex",
          align: "center",
          width: 100,
          render: (h, params) => {
            return h('div', params.row.sex || '-')
          }

        },
        {
          title: "联系电话",
          key: "phone",
          align: "center",
          width: 150,
          minWidth: 120,
          render: (h, params) => {
            return h('div', params.row.phone || '-')
          }

        },
        {
          title: "电子邮箱",
          key: "email",
          align: "center",
          width: 200,
          render: (h, params) => {
            return h('div', params.row.email || '-')
          }

        },
        {
          title: "创建时间",
          key: "create_time",
          align: "center",
          width: 200,
          minWidth: 120,
          render: (h, params) => {
            return h('div', params.row.create_time || '-')
          }

        },
        {
          title: "备注",
          key: "desc",
          align: "center",
          width: 244,
          render: (h, params) => {
            return h('div', params.row.desc || '-')
          }

        },
        {
          title: "状态",
          slot: "is_active",
          align: "center",
          width: 70,
          fixed: "right",

        },


        {
          title: "操作",
          slot: "action",
          width: 245,
          align: "center",
          fixed: "right",
        },
      ],
    }
  },

  watch: {
    upusermodal(val, oldVal) {
      if(val === false){
        for (let i=0; i<this.$refs.uptable.bodyData.length; i++){
        this.$refs.uptable.bodyData[i]._isChecked=false
      }
      }
    }
  }
}
</script>

<style scoped>

</style>
